<template>
  <div>
    <template v-if="!viewShow">
      <el-select v-model="svalue" :disabled="disabled" filterable clearable :placeholder="$t(placeholder)">
        <el-option
          v-for="item in fundList"
          :key="item.id"
          :label="isShort ? item.shortName : item.fundName"
          :value="item.id"
        />
      </el-select>
    </template>
    <template v-else>
      {{ viewName }}
    </template>
  </div>
</template>

<script>
import { findFund } from '@/api/fund/fundBase'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    isShort: {
      type: Boolean,
      default: true
    },
    // 基金状态
    fundStatus: {
      type: String,
      default: () => ''
    },
    // 基金类型类型
    fundType: {
      type: String,
      default: () => ''
    },
    // 是否使用权限过滤
    scope: {
      type: Boolean,
      default: () => false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    viewShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      svalue: this.value,
      fundList: []
    }
  },
  computed: {
    viewName() {
      var name = ''
      var row = this.fundList.find(v => v.id === this.value)
      if (row) {
        name = this.isShort ? row.shortName : row.fundName
      }
      return name
    }
  },
  watch: {
    value(newVal) {
      this.svalue = newVal
    },
    svalue(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$emit('input', this.svalue)
        this.$emit('change', this.svalue)
      }
    }
  },
  created() {
    var queryParams = {}
    queryParams.fundType = this.fundType
    queryParams.fundStatus = this.fundStatus
    queryParams.scope = this.scope
    findFund(queryParams).then(response => {
      this.fundList = response.data
    })
  },
  methods: {
  }
}
</script>
